<template>
	<view class="page-container">
		<!-- 背景图片 -->
		<image class="bg-image"
			src="https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E8%83%8C%E6%99%AF.png"
			mode="widthFix" alt="页面背景图"></image>

		<!-- 图标列表容器 -->
		<view class="icon-grid">
			<!-- 循环渲染8个图标项 -->
			<view class="icon-item" v-for="(item, index) in infoList" :key="index">
				<image class="icon-img" :src="item.icon" mode="widthFix" :alt="item.title + '图标'"></image>
				<text class="icon-title">{{ item.title }}</text>
			</view>
		</view>
		
		<view class="zz_list">
			<image src="https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/NPC.png" mode="aspectFit"></image>
			
			<view style="margin-left: 20rpx;">
				<view>新手指南</view>
				<view>一步一步了解泰拉瑞亚</view>
			</view>
		</view>

		<view class="zz_list">
			<image src="https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E7%A7%8D%E5%AD%90%E5%A4%A7%E5%85%A8.png" mode="aspectFit"></image>
			
			<view style="margin-left: 20rpx;">
				<view>泰拉瑞亚地图</view>
				<view>地牢,神庙等特殊地点的地图</view>
			</view>
		</view>
		<view class="zz_list">
			<image src="https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/BOSS.png" mode="aspectFit"></image>
			
			<view style="margin-left: 20rpx;">
				<view>泰拉瑞亚之外</view>
				<view>模组,拓展</view>
			</view>
		</view>
		
		<!-- 测试换行文本 -->
		<view class="test-text">
			<!-- 1212313222222222222222222222222222222222222222222222222222222222222222222222222222 -->
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 8个图标数据
				infoList: [{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E7%AD%BE%E5%88%B0.png',
						title: '每日签到'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E7%94%9F%E7%89%A9%E7%BE%A4%E7%B3%BB.png',
						title: '生物群系'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/NPC.png',
						title: 'NPC'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/BOSS.png',
						title: 'Boss'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E4%BA%8B%E4%BB%B6.png',
						title: '事件'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E7%A7%8D%E5%AD%90%E5%A4%A7%E5%85%A8.png',
						title: '种子大全'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E6%B8%B8%E6%88%8F%E4%B8%8B%E8%BD%BD.png',
						title: '游戏下载'
					},
					{
						icon: 'https://terraria-1300530744.cos.ap-guangzhou.myqcloud.com/%E4%B8%BB%E9%A1%B5/%E6%9B%B4%E5%A4%9A.png',
						title: '更多'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.page-container {
		/* 页面整体背景 */
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.bg-image {
		/* 背景图宽度占满屏幕 */
		width: 100%;
		display: block;
		/* 消除图片底部间隙 */
	}

	.icon-grid {
		/* 图标网格容器 */
		width: 95%;
		/* 宽度稍小于屏幕，留边距 */
		margin: -50rpx auto 0;
		/* 向上偏移覆盖背景图 */
		padding: 30rpx 0;
		/* 上下内边距 */
		background-color: #ffffff;
		border-radius: 21rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		/* 轻微阴影 */
		position: relative;
		z-index: 10;
		/* 确保在背景图上方 */

		/* Flex布局实现每行4个 */
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: flex-start;
		/* 从左侧开始排列 */
	}

	.icon-item {
		/* 每个图标项占25%宽度（4个一行） */
		width: 25%;
		display: flex;
		flex-direction: column;
		/* 图标在上，文字在下 */
		align-items: center;
		/* 水平居中 */
		margin-bottom: 20rpx;
		/* 项之间的垂直间距 */

		.icon-img {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 10rpx;
			/* 图标与文字间距 */
		}

		.icon-title {
			font-size: 24rpx;
			color: #333333;
			text-align: center;
			/* 标题文字超出换行 */
			word-break: break-all;
			width: 90%;
			/* 限制文字宽度，避免过宽 */
		}
	}
	
	.zz_list{
		
		// border: 1rpx solid red;
		width: 95%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		padding: 30rpx 0;
		height: 100rpx;
		/* 上下内边距 */
		background-color: #ffffff;
		border-radius: 21rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		display: flex;
		image{
			width: 100rpx;
			height: 100rpx;
			margin-left: 30rpx;
		}
	}
	
	.test-text {
		
		word-break: break-all;
		/* 强制换行 */
	}
</style>